<template>
	<view>
		<view class="mt30 flex col-center">
			<view class="w310 h80 bg-f radius16 pl30 text-center" style="line-height: 80rpx;" @click="start" v-if="timestart">
				{{timestart}}
			</view>
			<view class="w310 h80 bg-f radius16 pl30" style="line-height: 80rpx;" @click="start" v-else>
				<u-icon name="calendar" class="mr10"></u-icon>
				<text class="color9 fs26">开始时间</text>
			</view>
			<text class="fs26 fw-700 mr22 ml22">至</text>
			<view class="w310 h80 bg-f radius16 pl30 text-center" style="line-height: 80rpx;" @click="end" v-if="timeend">
				{{timeend}}
			</view>
			<view class="w310 h80 bg-f radius16 pl30" style="line-height: 80rpx;" v-else @click="end">
				<u-icon name="calendar" class="mr10"></u-icon>
				<text class="color9 fs26">结束时间</text>
			</view>
		</view>
		<u-picker mode="time" v-model="show" :params="params" @confirm='confirm'></u-picker>
	</view>
</template>

<script>
	export default {
		name: "time_select",
		data() {
			return {
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				show: false,
				//开始时间
				timestart:'',
				//结束时间
				timeend:'',
				//点击开始type==1   结束时间type==2
				type:''
			};
		},
		methods:{
			//选择开始时间
			start() {
				this.type=1
				this.show=true
			},
			//选择结束时间
			end() {
				this.type=2
				this.show=true
			},
			confirm(e) {
				if(this.type==1) {
					this.timestart=e.year+'-'+e.month+'-'+e.day
					if(this.timeend&&this.timestart) {
						let numTime1=this.timestart.replace(/-/g,'')
						let numTime2=this.timeend.replace(/-/g,'')
						if(numTime2>=numTime1) {
							this.$emit('seartime',this.timestart,this.timeend)
						}else {
							this.$msg('结束时间需要大于开始时间')
						}
					}
				}else if(this.type==2){
					this.timeend=e.year+'-'+e.month+'-'+e.day
					if(this.timeend&&this.timestart) {
						let numTime1=this.timestart.replace(/-/g,'')
						let numTime2=this.timeend.replace(/-/g,'')
						if(numTime2>=numTime1) {
							this.$emit('seartime',this.timestart,this.timeend)
						}else {
							this.$msg('结束时间需要大于开始时间')
						}
					}
				}
			}
		}
	}
</script>

<style lang="scss">

</style>
